<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="header-content">
          <h1>图书管理系统</h1>
          <div class="user-info">
            <p>
              <i class="el-icon-user" v-if="role == '用户'"></i>
              <i class="el-icon-setting" v-else></i>
              <span>{{ username }}</span>
            </p>
            <el-button size="mini" @click="ReturnLogin()" type="info">退出登录</el-button>
          </div>
        </div>
      </el-header>

      <el-container class="main-container">
        <div class="mobile-menu">
          <el-button 
            class="menu-toggle"
            @click="isCollapse = !isCollapse"
            type="text"
          >
            <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </el-button>
        </div>

        <el-aside :class="['mobile-aside', isCollapse ? 'collapsed' : '']">
          <el-menu
            default-active="1-1"
            class="el-menu-vertical"
            :collapse="isCollapse"
            :collapse-transition="false"
            background-color="transparent"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>读者</span>
              </template>
              <el-menu-item index="1-1" @click="$router.push('/user/BookBorrowing')">
                图书中心
              </el-menu-item>
              <el-menu-item index="1-2" @click="$router.push('/user/BookReturn')">
                正在借阅
              </el-menu-item>
              <el-menu-item index="1-3" @click="$router.push('/user/MyBorrowingRecords')">
                我的借阅记录
              </el-menu-item>
            </el-submenu>

            <el-submenu index="2" v-if="role == '管理员'">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>管理员</span>
              </template>
              <el-menu-item index="2-1" @click="$router.push('/admin/ReaderAdmin')">
                读者信息管理
              </el-menu-item>
              <el-menu-item index="2-2" @click="$router.push('/admin/BookAdmin')">
                图书管理
              </el-menu-item>
              <el-menu-item index="2-3" @click="$router.push('/admin/Bookrecall')">
                借出图书
              </el-menu-item>
              <el-menu-item index="2-4" @click="$router.push('/admin/BorrowingRecords')">
                借阅记录
              </el-menu-item>
              <el-menu-item index="2-5" @click="$router.push('/admin/Lendingranking')">
                图书借出排行
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//导入vuex
import {  mapState } from "vuex";
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
 computed:{
    //解构
    ...mapState(["username","role"])
 },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //退出登录
    ReturnLogin(){
        localStorage.removeItem('book_token')
        this.$router.push('/login')
        this.$message({
          message:'退出成功！',
          type: 'success'
        });
    }
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 375px;
  height: 100vh;
  overflow: hidden;

  .el-container {
    height: 100%;

    .el-header {
      padding: 0;
      background: linear-gradient(to right, #1e88e5, #3949ab);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      .header-content {
        height: 100%;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;

        h1 {
          font-size: 20px;
          margin: 8px 0;
          font-weight: 500;
        }

        .user-info {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 14px;

          p {
            margin: 0;
            display: flex;
            align-items: center;
            gap: 4px;

            i {
              font-size: 16px;
            }
          }

          .el-button {
            padding: 6px 12px;
            font-size: 12px;
          }
        }
      }
    }

    .main-container {
      position: relative;
      height: calc(100vh - 76px);

      .mobile-menu {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 1000;

        .menu-toggle {
          padding: 8px;
          color: #fff;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 4px;

          i {
            font-size: 20px;
          }
        }
      }

      .mobile-aside {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 999;
        width: 200px;
        background: linear-gradient(135deg, #1e88e5 0%, #3949ab 100%);
        transition: transform 0.3s ease;

        &.collapsed {
          display: none; // 收起时完全隐藏
        }

        .el-menu {
          border: none;
          background: transparent;

          .el-submenu__title {
            color: white;
            height: 46px;
            line-height: 46px;
            font-size: 14px;
            
            &:hover {
              background: rgba(255, 255, 255, 0.1);
            }
          }

          .el-menu-item {
            color: white;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            padding: 0 16px !important;
            
            &:hover, &.is-active {
              background: rgba(255, 255, 255, 0.1);
              color: #ffd04b;
            }
          }
        }
      }

      .el-main {
        margin-left: 0;
        padding: 16px;
        background-image: url("../assets/img/LoginBackground.jpg");
        background-size: cover;
        background-position: center;
        overflow-y: auto;
        // 添加表格的全局样式
        :deep(.el-table) {
          width: 100% !important;
          
          th, td {
            padding: 8px !important;
          }

          .cell {
            white-space: normal;
            line-height: 1.5;
          }
        }
      }
    }
  }
}

// iPhone SE 特定样式
@media screen and (max-width: 375px) {
  .home {
    .el-header {
      .header-content {
        h1 {
          font-size: 18px;
        }

        .user-info {
          font-size: 12px;

          .el-button {
            padding: 4px 8px;
            font-size: 11px;
          }
        }
      }
    }

    .main-container {
      .mobile-aside {
        width: 180px;

        &.collapsed {
          display: none; // 收起时完全隐藏
        }

        .el-menu {
          .el-submenu__title {
            height: 40px;
            line-height: 40px;
            font-size: 13px;
            padding: 0 12px !important;
          }

          .el-menu-item {
            height: 36px;
            line-height: 36px;
            font-size: 12px;
            padding: 0 12px !important;
          }
        }
      }

      .mobile-menu {
        .menu-toggle {
          padding: 6px;
          
          i {
            font-size: 18px;
          }
        }
      }
    }

    .el-main {
      padding: 8px;

      :deep(.el-table) {
        font-size: 12px;
        
        th {
          padding: 4px !important;
          font-size: 12px;
        }
        
        td {
          padding: 4px !important;
        }

        .cell {
          padding-left: 5px !important;
          padding-right: 5px !important;
          line-height: 1.3;
        }

        // 设置表格列的最大宽度
        .el-table__header th,
        .el-table__body td {
          max-width: 120px;
          min-width: 60px;
        }

        // 处理长文本
        .cell {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      // 调整分页器样式
      :deep(.el-pagination) {
        padding: 8px 0;
        text-align: center;
        white-space: nowrap;
        font-size: 12px;

        .btn-prev,
        .btn-next,
        .el-pager li {
          min-width: 28px;
          height: 28px;
          line-height: 28px;
        }

        .el-input__inner {
          height: 28px;
          line-height: 28px;
        }
      }
    }
  }
}

// 对于特别小的屏幕添加横向滚动
@media screen and (max-width: 320px) {
  .home {
    .el-main {
      :deep(.el-table__body-wrapper) {
        overflow-x: auto;
      }
    }
  }
}
</style>